<template>
    <div class="banner-container">
        <div class="banner-container__inner">
            <div class="banner-container__header">
                <timeout-cell :time="1000" :iteration="true" class="slideInDown">
                    <div class="banner-container__logo pointer"></div>
                    <div class="banner-container__title">
                        贝博代理管理系统
                    </div>
                </timeout-cell>

                <timeout-cell :time="1600" :iteration="true" class="slideInDown">
                    <div class="banner-container__brief">
                        我们提供科技十足的前沿产品，周到细致的客户服务品质，完善的技术保障及支持，欢迎您的加入
                    </div>
                    <div class="banner-container__main">

                        <div class="banner-container-cell">
                            <div class="banner-container-cell__decor banner-container-cell--service">
                                <img src="./img/service.png" alt="">
                            </div>
                            <div class="banner-container-cell__title">
                                高品质服务
                            </div>
                        </div>
                        <div class="banner-container-cell">
                            <div class="banner-container-cell__decor banner-container-cell--commision">
                                <img src="./img/commision.png" alt="">
                            </div>
                            <div class="banner-container-cell__title">
                                高额佣金
                            </div>
                        </div>
                        <div class="banner-container-cell">
                            <div class="banner-container-cell__decor banner-container-cell--major">
                                <img src="./img/major.png" alt="">
                            </div>
                            <div class="banner-container-cell__title">
                                专业的图标分析
                            </div>
                        </div>
                        <div class="banner-container-cell">
                            <div class="banner-container-cell__decor banner-container-cell--app">
                                <img src="./img/app.png" alt="">
                            </div>
                            <div class="banner-container-cell__title">
                                代理专属APP
                            </div>
                        </div>

                    </div>
                </timeout-cell>

            </div>
            <timeout-cell :time="2200" :iteration="true" class="slideInDown">
                <div class="banner-container__btn">

                    <router-link to='/register/mobile' v-show="false">
                        <el-button type="danger" block>申请加入</el-button>
                    </router-link>

                    <router-link to='/login'>
                        <el-button type="primary" class="banner-container__btn--login" block>代理登录</el-button>
                    </router-link>

                </div>
            </timeout-cell>

        </div>
    </div>
</template>


<script>
export default {
  name: "home-banner"
};
</script>

<style lang="scss" scoped>
@include b(banner-container) {
  width: 100%;
  height: 100%;
  @include utils-bg(url("./img/banner_bg.png") no-repeat);
  background-size: cover;
  @include e(inner) {
    width: 915px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }
  @include e(header) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    @include e(logo) {
      width: 312px;
      height: 44px;
      margin: 0 auto;
      @include utils-bg(url("./img/logo_bg.png") no-repeat);
      margin-bottom: 52px;
    }
    @include e(title) {
      font-size: 60px;
      color: #ffffff;
      font-family: "MicrosoftYaHeiUI";
      font-weight: bold;
      margin-bottom: 49px;
    }
    @include e(brief) {
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      opacity: 0.5;
    }
  }
  @include e(main) {
    display: flex;
    justify-content: space-between;
    margin-top: 33px;
    @include b(banner-container-cell) {
      flex: 0 0 170px;
      @include m(service) {
        @include utils-bg(url("./img/icon_service.png") no-repeat);
      }
      @include m(commision) {
        @include utils-bg(url("./img/icon_commision.png") no-repeat);
      }
      @include m(major) {
        @include utils-bg(url("./img/icon_major.png") no-repeat);
      }
      @include m(app) {
        @include utils-bg(url("./img/icon_app.png") no-repeat);
      }
      @include e(decor) {
        width: 84px;
        height: 84px;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-bottom: 4px;
        margin: 0 auto;
        img {
          height: 47px;
        }
      }
      @include e(title) {
        font-size: 24px;
        color: #ffffff;
        font-weight: bold;
        text-align: center;
        font-family: "MicrosoftYaHeiUI";
      }
    }
  }
  @include b(banner-container__btn) {
    width: 410px;
    margin: 0 auto;
    margin-top: 118px;
    button {
      height: 70px;
      line-height: 70px;
      padding-top: 0;
      padding-bottom: 0;
      font-size: 18px;
      font-family: "MicrosoftYaHeiUI";
    }
    @include m(login) {
      margin-top: 40px;
    }
  }
}
</style>
